E.1 - Istruzioni grafiche

Café wall illusion

Obiettivo

Riprodurre un'illusione ottica geometrica con una sequenza di istruzioni grafiche p5.js mantenendo invariato l'effetto percettivo.

Modalità

Scegliere un'illusione ottica statica composta da forme realizzabili con le sole istruzioni citate nella lezione sulle istruzioni grafiche di base senza usare if() o for(), se qualcuno sa già cosa sono.

L'illusione non deve essere particolarmente complessa ma il codice deve arrivare ad almeno 20 righe effettive escluse, quindi, quelle vuote.

La risoluzione massima del canvas deve essere di 800x600 pixel (larghezza x altezza). Se serve un rapporto larghezza/altezza diverso, uno solo dei due lati potrà essere inferiore. Ad esempio: 600x600 e 800x400 vanno bene ma non 600x400.

Il nome dell'illusione ottica dovrà essere indicato all'inizio del codice come commento. Se non si trova il nome dell'illusione ottica, può essere indicato l'URL della pagina in cui è stata trovata (NON quello dell'immagine).

Le istruzioni andranno inserite solo nella funzione setup(). La funzione draw(), presente nello sketch di base del Web Editor, andrà cancellata completamente.

// Illusione ottica:  Nome dell'illusione ottica 

function setup() {
    createCanvas( 800, 600 );  // solo uno dei due valori può essere inferiore

    istruzioni grafiche 
}

Consigli

Le illusioni ottiche si possono trovare molto facilmente con Google Immagini usando parole come "geometric optical illusions".

Se non si trova subito il nome dell'illusione ottica, si possono usare siti che permettono di cercare altre pagine contenenti la stessa immagine, come TinEye o, ancora, Google Immagini. In alternativa i nomi si possono cercare in alcuni siti che si occupano proprio di illusioni ottiche, come quello di Michael Bach o Optical Illusion and Focuses.

Una volta scelta l'illusione, fare attenzione al possibile colore dello sfondo dello sketch perché, con alcune illusioni ottiche, si può semplificare il codice impostando subito il colore giusto. Inserire comunque un'istruzione background(), senza intervenire sul valore alfa, per evitare parti semitrasparenti nella cattura dell'anteprima del canvas.

In altri casi può essere utile cambiare la modalità di fusione prima o dopo le istruzioni grafiche iniziali.

Consegna

Lo sketch andrà consegnato, dopo l'aggiunta dell'anteprima (obbligatoria), seguendo le modalità indicate nel "compito" della Classroom del corso.

Prima di consegnare l'esercitazione si consiglia di verificare il caricamento dell'anteprima e l'eventuale centratura del canvas attraverso la pagina di verifica dello sketch.